import { TableButton } from '@/components/basicWidget/Button';
import FormWidget from '@/components/basicWidget/FormWidget';
import QueryList from '@/components/basicWidget/QueryList';
import ImageWidget from '@/components/viewWidget/ImageWidget';
import PhotoAlbums from '@/components/viewWidget/PhotoAlbums';
import { post } from '@/utils/requestUtil';
import { Modal, message } from 'antd';
import React, { Component } from 'react'

export default class PrivatePthotoAlbums extends Component {

    constructor(props) {
        super(props);

        this.state = {
            modalVisual: false,
            photoModalVisual: false,
            albumsId: null
        }
    }
    async componentDidMount() {

    }

    actionColumns = (columns, data) => {
        columns.push({ title: '操作', dataIndex: 'operate' });
        columns.push({ title: '预览', dataIndex: 'view' })
        data = data.map(item => {
            item.operate = (
                <div style={{ display: 'flex', gap: 10 }}>
                    <TableButton onClick={() => { this.modalOnOpen(item.id) }}>编辑</TableButton>
                    <TableButton onClick={() => { this.photoModalOpen(item.id) }}>详情</TableButton>
                </div>
            );
            item.view = (
                <div style={{ width: '100px', height: '100px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <ImageWidget
                        style={{ maxWidth: '100%', maxHeight: '100%' }} 
                        src={item.filePath} 
                        alt=''
                    ></ImageWidget>
                </div>
            );
            return item;
        });
        return { newColumns: columns, newData: data }
    }

    modalOnOpen = (id) => {
        this.setState({
            modalVisual: true,
            albumsId: id
        });
    }

    modalOnCancel = () => {
        this.setState({
            modalVisual: false,
            albumsId: null
        });
    }

    photoModalOpen = (id) => {
        this.setState({
            photoModalVisual: true,
            albumsId: id
        });
    }

    photoModalCancel = () => {
        this.setState({
            photoModalVisual: false,
            albumsId: null
        });
    }

    renderModal = () => {
        return (
            <Modal
                title='相册编辑'
                open={this.state.modalVisual}
                onCancel={this.modalOnCancel}
                footer={null}
                width='400px'
                destroyOnClose={true}
            >
                <FormWidget
                    code='privatePthotoAlbumsEdit'
                    id={this.state.albumsId}
                    serviceName='blog'
                    collectionName='customer_private_photo_albums'
                    initFormData={
                        {
                            customerId: this.props.user.id
                        }
                    }
                    onDataCreate={async (formState, type) => {
                        this.modalOnCancel();
                        this.queryList.onQuery();
                    }}
                >
                </FormWidget>
            </Modal>
        );
    }

    renderPhotoModal = () => {
        return (
            <Modal
                title='相册详情'
                open={this.state.photoModalVisual}
                onCancel={this.photoModalCancel}
                footer={null}
                width='100%'
                destroyOnClose={true}
            >
                <div style={{ maxHeight: '60vh', overflow: 'scroll' }}>
                    <PhotoAlbums
                        albumsId={this.state.albumsId}
                    />
                </div>
            </Modal>
        );
    }

    onDelete = async () => {
        const { selectedRowKeys } = this.queryList.state;
        if (selectedRowKeys.length === 0) {
            message.warning('请选择要删除的相册');
            return false;
        }
        Modal.confirm({
            title: '确定删除选中的相册吗？',
            content: '删除后不可恢复',
            okText: '确定',
            cancelText: '取消',
            onOk: async () => {
                const response = await post('/blog/albums/delete', {
                    body: JSON.stringify(selectedRowKeys)
                });
                if (response && response.code === 200) {
                    message.success('删除成功');
                    this.queryList.onQuery();
                } else {
                    message.error('删除失败');
                }
            }
        });
    }

    render() {
        return (
            <>
                <QueryList
                    queryCode='privatePthotoAlbums'
                    onAdd={this.modalOnOpen}
                    onDelete={this.onDelete}
                    actionColumns={this.actionColumns}
                    refData={{
                        customerId: this.props.user.id
                    }}
                    ref={queryList => this.queryList = queryList}
                >
                </QueryList>
                {this.renderModal()}
                {this.renderPhotoModal()}
            </>
        )
    }
}
